<script>
import { Toast } from 'vant';

export default {
  name: 'updatePassword',
  data() {
    return {
      updateForm: {
        //姓名
        customerName: '**群',
        //手机号
        phone: '13521558272',
        //   旧密码
        oldPassword: '',
        //   新密码
        newPassword: '',
        //确认密码
        confirmPassword: ''
      },
      disabled: true,
      showSearch: false
    };
  },
  methods: {
    submit() {
      console.log('submit');
    },
    updatePasswordSubmit() {
      console.log('updatePasswordSubmit');
      Toast({
        message: '修改成功',
        icon:require('../index/image/success.png'),
      });
    }
  },
  computed: {
    // 是否可以提交
    disabledStatus() {
      return !this.updateForm.oldPassword || !this.updateForm.newPassword || !this.updateForm.confirmPassword;
    }
  }
};
</script>

<template>
  <frame-view class="index">
    <div style="padding: 0 20px 20px;margin-top: 20px">
      <div style="background-color: #fff;border-radius: 20px;overflow:hidden;padding-bottom: 15px">

        <van-field
          v-model="updateForm.customerName"
          style="margin-top: 15px"
          name="姓名"
          label-width="8em"
          label="姓名"
          placeholder="姓名"
          input-align="right"
          readonly
        >
          <template #extra>
            <div style="display: flex;align-items: center;margin-left: 4px">

            </div>
          </template>
        </van-field>

        <van-field
          v-model="updateForm.phone"
          style="margin-top: 20px"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          input-align="right"
        >
        </van-field>

        <van-field
          v-model="updateForm.oldPassword"
          style="margin-top: 20px"
          name="旧密码"
          label="旧密码"
          placeholder="旧密码"
          type="password"
          input-align="right"
        >
        </van-field>

        <van-field
          v-model="updateForm.newPassword"
          style="margin-top: 20px"
          name="新密码"
          label="新密码"
          placeholder="新密码"
          type="password"
          input-align="right"
        >
        </van-field>

        <van-field
          v-model="updateForm.confirmPassword"
          style="margin-top: 20px"
          name="确认密码"
          label="确认密码"
          placeholder="确认密码"
          type="password"
          input-align="right"
        >
        </van-field>
      </div>
      <p style="margin-left: 36px;font-size: 28px;color: #999999;line-height: 40px;width: 622px;margin-top: 20px">
        密码必须是8-16位英文字母、数字、字符组合（不能是纯数字）</p>
      <van-button style="margin-top:60px;width: 686px;height: 80px" :disabled="disabledStatus" round block type="info"
                  @click="updatePasswordSubmit"
                  native-type="submit">提交
      </van-button>
<p style="font-size: 28px;margin-top:36px;color: #4569F8;text-align: center">忘记旧密码？</p>
    </div>

  </frame-view>
</template>

<style scoped lang="scss">

</style>
